<template>
    <div>
        <a-modal
         :closable="false" 
         :visible="previewVisible" 
         :footer="null" 
         @cancel="previewVisible = false" 
         class="previewRecordFile-modal-box" 
         :dialogStyle="{top:'20px'}"
         :class="wjArr?'previewRecordFileArr-modal':'previewRecordFileItem-modal'"
        >
            <div class="previewRecord-content" >
                <a-icon v-if="wjArr" class="close-circle-icon" type="close-circle" @click="previewVisible = false" />
                <a-icon @click="rotationAngle = rotationAngle+90" style="font-size: 24px;padding-left: 15px;" type="redo" /><!--顺 -->
                <a-icon @click="rotationAngle = rotationAngle-90" style="font-size: 24px;padding-left: 15px;" type="undo" />
                <!-- width:50%; -->
                <div v-if="wjArr" style="height: calc(100vh - 86px);overflow: auto;">
                    <div v-for="(item,index) in wjArr" :key="index" style="border: 1px solid #000;margin-bottom: 5px;" >
                        <img style="max-width:100%;" :src="item.base64Url" :alt="item.fwjxsmc+item.fwjlx" :style="{transform: 'rotate(' + rotationAngle + 'deg)'}">
                    </div>
                </div>
                <div v-else style="display: flex;justify-content: center;" @click="previewVisible = false">
                    <div style="display: inline-block;position: relative;width: 80%;" @click.stop="previewVisible = true">
                        <div style="width: 100%;background: #fff;display: flex;justify-content: center;flex-direction: column;padding: 5px 15px 5px 15px;color: rgba(0, 0, 0, 0.65);">
                            <div style="display: flex;justify-content: space-between;" >
                                <div>
                                    <a-icon v-if="imgWidth<800" style="font-size: 24px;" @click="zoomClick(true)" type="zoom-in" />
                                    <a-icon v-if="imgWidth>20" style="font-size: 24px;padding-left: 15px;" @click="zoomClick(false)" type="zoom-out" />
                                    <a-icon @click="rotationAngle = rotationAngle+90" style="font-size: 24px;padding-left: 15px;" type="redo" /><!--顺 -->
                                    <a-icon @click="rotationAngle = rotationAngle-90" style="font-size: 24px;padding-left: 15px;" type="undo" />
                                </div>
                                <a-icon style="font-size: 24px;" type="close-circle" @click.stop="previewVisible = false" />
                            </div>
                            <div style="overflow: auto;width: 100%;height: calc(100vh - 80px);display: flex;justify-content: center;align-items: center;" @wheel="handleWheel">
                                <img 
                                 style="object-fit: scale-down;" 
                                 :style="{width:imgWidth+'%',height:imgHeight+'%',objectFit: imgWidth<=200?'scale-down':'inherit',transform: 'rotate(' + rotationAngle + 'deg)'}" 
                                 :src="currentRow.base64Url" :alt="currentRow.fwjxsmc+currentRow.fwjlx">
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </a-modal>
    </div>
</template>
<script>
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            previewVisible:false,
            wjArr:'',
            currentRow:{},
            imgWidth:100,
            imgHeight:100,
            rotationAngle:0,

        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,wjArr){
            this.imgWidth = 100
            this.imgHeight = 100
            this.rotationAngle = 0
            this.wjArr = ''
            this.currentRow = {}
            if(wjArr){
                this.wjArr = wjArr
            }else{
                this.currentRow = row
            }
        },
        zoomClick(val){
            if(val){
                this.imgWidth = Math.floor(this.imgWidth + 20) 
                this.imgHeight = Math.floor(this.imgHeight + 20)
            }else{
                this.imgWidth = Math.floor(this.imgWidth - 20)
                this.imgHeight = Math.floor(this.imgHeight - 20)
            }
        },
        handleWheel(event){
            event.preventDefault();
            //console.log('我的鼠标在滚动',event.deltaY)
            if(event.deltaY >= 0){
                if(this.imgWidth <= 800){
                    this.zoomClick(true)
                }
            }else{
                if(this.imgWidth>=40){
                    this.zoomClick(false)
                }
                
            }
        },
    }
}
</script>
<style lang="less">
.previewRecordFile-modal-box{
    .ant-modal-body{
        padding: 0;
    }
    .previewRecord-content{
        position: relative;
        .close-circle-icon{
            position: absolute;
            right: -26px;
            top: -26px;
            background-color: #fff;
            color: #666;
            padding: 5px;
            display: inline-block;
            font-size: 20px;
            border-radius: 50%;
        }
    }
}
.previewRecordFileArr-modal{
    .ant-modal{
        width: 810px !important;
    }
}
.previewRecordFileItem-modal{
    .ant-modal{
        width: auto !important;
        background-color: transparent !important;
    }
    .ant-modal-content{
        background-color: transparent;
    }
    .ant-modal-body{
        border: none !important;
        padding: 0 !important;
    }
    .close-circle-icon1{
        position: absolute;
        top: -16px;
        right: -16px;
        background-color: #fff;
        color: #666;
        padding: 5px;
        display: inline-block;
        font-size: 20px;
        border-radius: 50%;
    }
}
</style>